<template>
<!-- 星星评分组件 -->
  <div class="star starBG">
    <div class="starBG light" :class="classList[score - 1]"></div>
  </div>
</template>

<script>
export default {
  name: 'commentItem',
  props: {
    score: Number, // 评分
  },
  data () {
    return {
      classList: ['s1','s2','s3','s4','s5']
    }
  }
}
</script>

<style scoped lang="scss">
.star{
  width: 140px;
  height: 20px;
  position: relative;
  background-position: 0 0;
  .light{
    position: absolute;
    left: 0;
    top: 0;
    height: 20px;
    background-position: 0 -20px;
  }
  .s5{
    width: 140px;
  }
  .s4{
    width: 110px;
  }
  .s3{
    width: 80px;
  }
  .s2{
    width: 50px;
  }
  .s1{
    width: 20px;
  }
}
.starBG{
  background-repeat: no-repeat;
  background-size: 140px 40px;
  background-image: url(../../../../static/images/star6_gaitubao_137x39.png);
}
</style>

